import './SmallWindow.scss'
import { ColorCallBack } from '../../Utils'
import { VideoTempA01 } from '../../Utils/VideoTemp'

const SmallWindow = ({ config, title, children }) => {
    const {
        top_height,
        top_image_A01,
        top_image_A02,
        top_image_A03,
        top_image_A01_width,
        top_image_A03_width,

        top_text_fill,
        top_text_index,
        top_text_fontSize,
        top_text_fontFamily,
        top_text_fontWeight,
        top_text_fontStyle,
        top_text_shadowX,
        top_text_shadowY,
        top_text_shadowB,
        top_text_shadowC,

        top_content_padding,
        top_content_backType,
        top_content_backColor,
        top_content_backColorDeg,
        top_content_backImage,
        top_content_backVideo,
        top_content_backVideoStart,
        top_content_backVideoEND,
    } = config

    const titleStyle = {
        color: top_text_fill,
        textIndent: top_text_index,
        height: top_text_fontSize,
        lineHeight: top_text_fontSize + 'px',
        fontSize: top_text_fontSize,
        fontFamily: top_text_fontFamily,
        fontWeight: top_text_fontWeight,
        fontStyle: top_text_fontStyle,
        filter: `drop-shadow(${top_text_shadowX}px ${top_text_shadowY}px ${top_text_shadowB}px ${top_text_shadowC})`,
    }

    return (
        <div className='SmallWindow'>
            <div className='TopData' style={{ height: top_height }}>
                <div>
                    <img src={top_image_A01} style={{ width: top_image_A01_width, height: top_height }} alt="" />
                    <img src={top_image_A02} style={{ flex: 1, height: top_height }} alt="" />
                    <img src={top_image_A03} style={{ width: top_image_A03_width, height: top_height }} alt="" />
                </div>
                <div style={titleStyle}>{title}</div>
            </div>
            <div className='Content'>
                <div className='BackConfig'>
                    {(() => {
                        if (top_content_backType === 'color') {
                            return <div className='BackBase_Color' style={{ background: ColorCallBack(top_content_backColor, top_content_backColorDeg) }} />
                        }
                        if (top_content_backType === 'image') {
                            return <img className='BackBase_Image' src={top_content_backImage} alt="" />
                        }
                        if (top_content_backType === 'video') {
                            return <VideoTempA01 url={top_content_backVideo} seekTimeStart={top_content_backVideoStart} seekTimeEnd={top_content_backVideoEND} />
                        }
                    })()}
                </div>
                <div className='Children' style={{ padding: top_content_padding }}>{children}</div>
            </div>
        </div>
    );
};

export default SmallWindow;